<template>
    <div class="canvas_box" :class="{mouseactive:showbnts}" @mouseover="handleMouse(true)" @mouseout="handleMouse(false)">
        <div class="contents_box">
            <div class="echart_title">
               <h3>投诉分析</h3>
                <span class="" v-show="showbnts"
                      :class="[screensstate ? 'act_cls' : 'screens' ]"
                      @mouseover="handleEls('top',true)"
                      @mouseout="handleEls('top',false)"
                      @click="handleScreen"
                >
                </span>
           </div>
            <div class="Colors_box">

            </div>
        </div>
        <span class="stretch" v-show="showbnts"
              @mouseover="handleEls('bottom',true)"
              @mouseout="handleEls('bottom',false)"
        >
            <img :src="stretch" />
        </span>
    </div>
</template>
<style scoped>
   .canvas_box{
       width:690px;
       background:#fff;
       position:absolute;
       left:11%;
       top:6%;
       border-radius: 5px;
   }
   .mouseactive{
       box-shadow:0px 0px 20px 0.5px rgba(0,0,0,0.5)
   }
    .contents_box{
        padding:20px;
    }

    .echart_title{
        padding:5px 0;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .act_cls{
        display:inline-block;
        width:24px;
        height:20px;
        background:url('/static/common/images/xgicon_on.png')no-repeat 0 -40px;
        cursor: pointer;
    }
    .Colors_box{
        min-height:370px;
    }
    .screens{
        display:inline-block;
        width:24px;
        height:20px;
        background:url('/static/common/images/xgicon.png')no-repeat 0 -40px;
        cursor: pointer;
    }
    .stretch{
        position:absolute;
        right:5px;
        bottom:-5px;
        cursor: nwse-resize;
    }
</style>
<script>

    export default{
        data(){
            return {
                stretch:'/static/common/images/suofang.png',
                showbnts:false,
                screensstate:false,
                sofang:false,
            }
        },

        components: {},
        methods:{
            handleMouse(ev){
                this.showbnts = ev ? true :false
            },
            handleScreen(){

              this.$store.dispatch('onscreen',{typeState:true,title:'投拆与分析',echarts:{}})

            },
            handleEls(el,ev){
                if(el=="top"){
                    this.screensstate = ev ? true : false;
                }else{
                    //this.sofang = ev ? true : false;
                    this.stretch = ev ? '/static/common/images/suofang_on.png':'/static/common/images/suofang.png'
                }
            }

        }

    }

</script>
